import React from 'react'
import {
  View,
  Dimensions,
  TouchableOpacity,
  Text,
  Button
} from 'react-native'

import { observer } from 'mobx-react-lite'

import Icon from 'react-native-vector-icons/Ionicons'
import { useNavigation } from '@react-navigation/native'

import Modal from 'react-native-modal'

import { useStores } from '../stores'
import i18n from '../i18n'
import { Snackbar } from './Snackbar'
import { TextInput } from 'react-native-gesture-handler'


export default observer(({
  real = false,
  onSummit = () => { },
  onClear = () => { },
  input = '',
  onChangeText = txt => { },
}) => {
  const { appearance: ap, search, bookApi } = useStores()
  const navigation = useNavigation()
  const inputRef = React.useRef()

  if (!search.placeholder) {
    bookApi.fetchSearchPlaceholder().then(data => {
      search.setPlaceholder(data.placeholder.name)
      search.setHotspot(data.hotspot)
    })
  }

  if (!real) {
    return (
      <View style={{ ...styles.container, backgroundColor: ap.theme.background }}>
        <TouchableOpacity style={{ ...styles.searchContainer, backgroundColor: ap.theme.surface }}
          onPress={() => {
            navigation.navigate('Search')
          }} activeOpacity={0.9}>
          <View style={{ ...styles.searchIconContainer }}>
            <Icon name='search-outline' size={24} color={ap.theme.weak} />
          </View>

          <View>
            <Text style={{ color: ap.theme.weak }}>
              {search.placeholder}
            </Text>
          </View>

          <View style={{ flexDirection: 'row', justifyContent: 'flex-end', flex: 1 }}>
            <View
            style={{borderLeftColor: ap.theme.weak, borderLeftWidth: 1, 
            marginBottom: 8, marginTop: 8}}>

            </View>
            <TouchableOpacity style={{ ...styles.marketButton }}
              onPress={() => navigation.navigate('Mall')} activeOpacity={0.9}>
              <Text style={{ ...styles.rightButton, color: ap.theme.second }}>{i18n.t('mall')}</Text>
            </TouchableOpacity>
          </View>
        </TouchableOpacity>
      </View>
    )
  }
  //input
  return (
    <View style={[styles.container, {
      backgroundColor: ap.theme.background, flexDirection: 'row',
      alignItems: 'center'
    }]}>
      {/* <TouchableOpacity
        style={[styles.searchIconContainer, { marginLeft: 2, width: 'auto' }]}
        onPress={() => navigation.goBack()}
      >
        <Icon name='chevron-back-outline' size={33} color={ap.theme.active} />
      </TouchableOpacity> */}

      {/* <View style={[styles.searchContainer, { backgroundColor: ap.theme.surface, marginLeft: 0 }]}> */}
      <View style={[styles.searchContainer,
      { backgroundColor: ap.theme.surface }]}>

        <TouchableOpacity
          onPress={onSummit}
          style={[styles.searchIconContainer, { marginLeft: 8, width: 30 }]}>
          <Icon name='search-outline' size={24} color={ap.theme.weak} />
        </TouchableOpacity>

        <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
          <TextInput
            ref={inputRef}
            autoFocus={true}
            onSubmitEditing={onSummit}
            onChangeText={txt => {
              onChangeText(txt)
              if (txt.length == 0) {
                onClear()
              }
            }}
            value={input}
            maxLength={40}
            placeholder={search.placeholder}
            placeholderTextColor={ap.theme.weak}
            selectionColor={ap.theme.active}
            style={{ ...styles.searchInput, color: ap.theme.second, flex: 10 }} />

          {
            input &&
            <TouchableOpacity
              style={{
                flex: 1,
                alignItems: 'flex-end',
                justifyContent: 'center',
                paddingRight: 6,
                paddingBottom: 6,
                paddingTop: 6
              }}
              onPress={() => {
                inputRef.current.clear()
                onChangeText('')
                onClear()
              }}>
              <Icon name='close-outline' size={24} color={ap.theme.weak} />
            </TouchableOpacity>
            || <></>
          }
        </View>
        <TouchableOpacity
          style={{padding: 10, paddingLeft: 0, paddingRight: 14}}
          onPress={() => navigation.goBack()}>
          <Text style={{ color: ap.theme.second, fontSize: 14 }}>{i18n.t('cancel')}</Text>
        </TouchableOpacity>
      </View>

    </View>
  )

})

const styles = {
  container: {
    position: 'absolute',
    top: 0,
    width: Dimensions.get('window').width,
    height: 50,
  },
  searchContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 6,
    marginBottom: 6,
    marginLeft: 14,
    marginRight: 14,
    borderRadius: 6,
  },
  searchIconContainer: {
    marginTop: 6,
    marginBottom: 6,
    marginLeft: 12,
    width: 35,
  },
  marketButton: {
    paddingRight: 16,
    paddingLeft: 10,
    paddingTop: 10,
    paddingBottom: 10,
  },

  rightButton: {
    fontSize: 14,
  },

  searchInput: {
    // height: 'auto',
    // fontSize: 14,
    // paddingTop:6
  }
}